<template>
	<view class="header"></view>
	<view class="content" :style="{ paddingTop: headerBarHeight + 'px' }">
		<view class="title">我的</view>

		<view class="avatar">
			<image :src="`${baseImageUrl}${user_info.avatar}`"></image>
		</view>
		<view class="nickname">{{user_info.username}}</view>
		<view class="phone">{{user_info.mobile}}</view>

		<view class="tabs">
		<!-- 	<view class="item" @click="router('/pagesB/setting/changePhone')">
				<image src="@/static/my/icon1.png"></image>
			</view> -->
			<view class="item" @click="router()">
				<image src="@/static/my/icon1.png"></image>
			</view>
			<view class="item" @click="router('/pagesA/my/order')">
				<image src="@/static/my/icon2.png"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	const baseImageUrl = import.meta.env.VITE_BASE_IMAGE_URL;

	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"

	import useBase from "@/hooks/useBase.js";

	import {
		userInfo
	} from '@/util/request/api.js';

	const {
		router
	} = useBase();

	const headerBarHeight = ref(0);

	const user_info = ref({});
	onLoad(async () => {
		const {
			statusBarHeight,
			safeAreaInsets
		} = uni.getSystemInfoSync();
		headerBarHeight.value = safeAreaInsets?.top || statusBarHeight;

		let res = await userInfo();
		let mobile = res.mobile;

		res.mobile = mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');

		user_info.value = res;
	});
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 800rpx;
		box-sizing: border-box;
		background: url(@/static/my/header.png) no-repeat;
		background-size: 100% 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 99;

		.title {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
			box-sizing: content-box;
		}

		.avatar {
			width: 150rpx;
			height: 150rpx;
			border: 4rpx solid #FFFFFF;
			border-radius: 50%;
			margin-top: 66rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;

			}
		}

		.nickname {
			line-height: 1;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 600;
			margin: 30rpx 0 20rpx;
		}

		.phone {
			line-height: 1;
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: 400;
		}

		.tabs {
			width: 100%;
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;

			.item {
				width: 335rpx;
				height: 200rpx;
				border-radius: 20rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.list {
			.item {
				height: 200px;
			}
		}
	}
</style>